<template>
  <el-menu
    id="nav"
    default-active="1"
    class="el-menu-vertical-demo"
    background-color="#324157"
    text-color="#fff"
    active-text-color="#ffd04b">

    <template v-for="(item) in items">
      <el-menu-item :index="item.ide" @click="jump(item.path)" v-if="item.type==type">
        <i :class="item.icon"></i>
        <span slot="title">{{item.title}}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
  // 导入导航栏数据数组
  import navItems from "../../common/NavItem";

  export default {
    name: "Nav",
    data() {
      return {
        items: [],
        type: 0
      }
    },
    methods: {
      jump(path) {
        console.log(path)
        this.$router.push({
          name: path
        })
      }
    },
    mounted() {
      console.log("=================");
      // 进入页面就回去数据 ,赋值给 items 变量上
      this.items = navItems;
      // 获取登录用户信息,如果没有就直接返回登录页面
      // 有就获取user type 的值
      let user = this.$store.getters.getUser;
      if (user.username != null && user.username != '') {
        console.log(user)
        this.type = user.type;
        console.log(this.type)
      } else {
        this.$message.error("已注销,1秒回到登录页面");
        setTimeout(()=>{
          this.$router.replace("/")
        },1500)

      }
    }
  }
</script>

<style scoped>
  #nav {
    /*height: 100%;*/
    /*height:100vh*/
    text-align: left;
    width: 200px;
  }
</style>
